<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:context="http://www.springframework.org/schema/context">
<head>
    <title>Title</title>
    <!--  <meta name="referrer" content="no-referrer"/>
      <meta name="_csrf" th:content="${_csrf.token}"/>
      <meta name="_csrf_header" th:content="${_csrf.headerName}"/>-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" th:href="@{assets/css/core.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/menu.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/index.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/admin.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/typography.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/form.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/component.css}"/>

    <link rel="stylesheet" th:href="@{http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>

    <!-- Favicons -->
    <link rel="icon" th:href="@{img/favicon.png}"/>
    <link rel="apple-touch-icon" th:href="@{img/apple-touch-icon.png}"/>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>

    <!--external css-->
    <link rel="stylesheet" th:href="@{lib/font-awesome/css/font-awesome.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/zabuto_calendar.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/gritter/css/jquery.gritter.css}"/>

    <link rel="stylesheet" th:href="@{css/style.css}"/>
    <link rel="stylesheet" th:href="@{css/style-responsive.css}"/>
    <script th:src="@{lib/chart-master/Chart.js}"></script>

    <style type="text/css">
        .loading {
            width: 160px;
            height: 56px;
            position: absolute;
            top: 50%;
            left: 50%;
            line-height: 56px;
            color: #fff;
            padding-left: 60px;
            font-size: 15px;
            background: #000 url(/loading.gif) no-repeat 10px 50%;
            opacity: 0.7;
            z-index: 9999;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        }
    </style>

</head>
<body style="overflow-y:scroll;">


<section id="container">
    <!--header start-->
    <header class="header black-bg" th:replace="headBar::myHeadBar">
    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside th:replace="leftSideBar::myLeftBar">
    </aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <h3><i class="fa fa-angle-right"></i> 主题上传</h3>
            <!-- BASIC FORM VALIDATION -->
            <div class="row mt">
                <div class="col-lg-12">
                    <!--<h4><i class="fa fa-angle-right"></i> Basic Validations</h4>-->
                    <div class="form-panel">

                        <form id="themeForm" class="am-form" enctype="multipart/form-data" th:action="@{/themeImg}"
                              method="post">

                            <div class="form-group has-success">

                                <label class="col-lg-2 control-label">主题名：</label><span id="msg"></span>

                                <input type="text" id="inputName" name="inputName"
                                       oninput="checkName()" placeholder="输入主题名" required/>
                            </div>

                            <div class="form-group has-success">
                                <label for="author" class="col-lg-2 control-label">作者:</label>

                                <input type="text" id="author" name="author" placeholder="输入作者"
                                       required/>
                            </div>


                            <div class="form-group has-success">
                                <label class="col-lg-2 control-label">所属厂商名：</label>
                                <select id="factory" name="factory" style="width: 100px;margin-left: 150px"></select>

                            </div>

                            <div class="am-form-group">
                                <label for="uploadimage" class="col-lg-2 control-label">预览图：</label>

                                <input type="file" name="file" id="uploadimage" th:onchange="checkImgFile()"/><br/>

                            </div>

                            <div class="am-form-group">
                                <label for="uploadfile" class="col-lg-2 control-label">主题文件：</label>

                                <input type="file" name="file" id="uploadfile" th:onchange="checkFile()"/><br/>

                            </div>

                            <div class="am-form-group">
                                <label for="description" class="col-lg-2 control-label">描述(少于100个字符)：</label>
                                <textarea id="description" minlength="0" maxlength="100" name="description"></textarea>
                            </div>


                            <div class="form-group">
                                <button class="am-btn btn-theme" type="button" id="submit_btn"
                                        style="margin-left: 500px;"
                                        th:attr="del_uri=@{/themeImg}">提交
                                </button>

                                <!--  <button  type="button" id="submit_btn"
                                            onclick="showModel();"
                                          >test
                                  </button>-->

                            </div>
                        </form>


                    </div>
                    <!-- /form-panel -->
                </div>
                <!-- /col-lg-12 -->
            </div>
            <!-- /row -->


        </section>
        <!-- /wrapper -->
    </section>
    <!-- /MAIN CONTENT -->
    <!--main content end-->

</section>


<!-- navbar -->
<a th:href="@{admin-offcanvas}" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"><!--<i class="fa fa-bars" aria-hidden="true"></i>--></a>

<script type="text/javascript" th:src="@{assets/js/jquery-2.1.0.js}"></script>
<!--<script type="text/javascript" th:src="@{assets/js/app.js}"></script>-->
<script type="text/javascript" th:src="@{assets/js/blockUI.js}"></script>
<!--<script type="text/javascript" th:src="@{assets/js/charts/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{assets/js/charts/indexChart.js}"></script>-->
<script type="text/javascript" th:src="@{assets/js/amazeui.min.js}"></script>


<script type="text/javascript" th:inline="javascript">
    function checkName() {
        var inputName = $("#inputName").val();
        if (inputName != null) {
            var URL = [[@{
                /themeNameCheck}]];
                $.ajax({
                    type: "get",
                    url: URL,
                    data: {name: inputName},
                    success: function (data) {
                        if (0 < parseInt(data)) {
                            $("#saveUser").attr("disabled", true);
                            $("#msg").html(" \"<span style='color:red'>主题名重复！</span>\"");
                        } else {

                            $("#saveUser").attr("disabled", false);
                            $("#msg").html("\"<span style='color:blueviolet'>主题名可用！</span>\"");

                        }
                        console.log(data);
                    }
                });
            }

        }
</script>


<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /headPic}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    $("#headPic").attr("src", "data:image/gif;base64," + data);
                }
            });
        }
    );


</script>

<!--提交表单-->
<script type="text/javascript">


    function showModel() {
        $('#modal-container-995778').modal('show')
    }

    $("#submit_btn").click(function uploadForm() {

        var themeName = $("#inputName").val();
        var author = $("#author").val();
        var factory = $("#factory").val();
        var uploadimage = $("#uploadimage").get(0).files[0];
        var uploadfile = $("#uploadfile").get(0).files[0];

        if (themeName != "" && author != "" && factory != "" && uploadimage != "" && uploadfile != "") {
            if (confirm("确定上传主题吗")) {

                showModel();
                $("#themeForm").attr("action", $(this).attr("del_uri")).submit();

            } else {
                return false;
            }

        } else {

           alert("请先将基本信息填写完整！");
        }
    });


</script>


<!--获取厂商列表-->
<script type="text/javascript" th:inline="javascript">
    $(function () {

        var URL = [[@{
            /getFactoryList}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        var value = data[i].id;
                        var lable = data[i].name;
                        $('#factory').append("<option value=" + value + ">" + lable + "</option>");
                    }

                }
            });
        }
    )


</script>


<!--验证登陆者的主题主题上传权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkPermission}]];
            var add = "上传";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action: add
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#uploadTheme").show();
                    } else {

                        $("#uploadTheme").hide();
                    }
                }
            });
        }
    )


</script>

<!--验证登陆者的主题主题查看权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkPermission}]];
            var view = "查看";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action: view
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#viewTheme").show()
                    } else {

                        $("#viewTheme").hide()
                    }
                }
            });
        }
    )


</script>

<!--验证用户上传的图片格式是否正确-->
<script type="text/javascript" th:inline="javascript">
    function checkImgFile() {

        var file = uploadimage.files[0];
        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            $("#submit_btn").attr("disabled", true);
            return false;
        } else {
            $("#submit_btn").attr("disabled", false);
        }

    }
</script>

!--验证用户上传的文件格式是否正确-->
<script type="text/javascript" th:inline="javascript">
    function checkFile() {
        var file = $("#uploadfile").val();
        //检验文件类型是否正确
        var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
        if (exec != "itz") {
            alert("文件格式不对，请上传itz文件!");
            $("#submit_btn").attr("disabled", true);
            return false;
        } else {
            $("#submit_btn").attr("disabled", false);
        }

    }
</script>


<!--验证角色-->
<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkRole}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        var url = [[@{
                            /user}]]
                            $("#myUser").html('<a href="' + url + '" >\n' +
                                '                        <i class="fa fa-desktop"></i>\n' +
                                '                        <span >用户管理</span>\n' +
                                '                    </a>');
                            // $("#userManager").show();
                        }
                    else
                        {
                            // $("#userManager").hide();
                        }
                    }
                });
        }
    )


</script>


<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{lib/jquery/jquery.min.js}"></script>

<script th:src="@{lib/bootstrap/js/bootstrap.js}"></script>
<script class="include" type="text/javascript" th:src="@{lib/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{lib/jquery.scrollTo.min.js}"></script>
<script th:src="@{lib/jquery.nicescroll.js}" type="text/javascript"></script>
<script th:src="@{lib/jquery.sparkline.js}"></script>
<!--common script for all pages-->
<script th:src="@{lib/common-scripts.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter/js/jquery.gritter.js}"></script>
<script type="text/javascript" th:src="@{lib/gritter-conf.js}"></script>
<!--script for this page-->
<script th:src="@{lib/sparkline-chart.js}"></script>
<script th:src="@{lib/zabuto_calendar.js}"></script>


<div class="modal fade" id="modal-container-995778" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <div class="modal-body" style="
    margin-top: 250px;
    margin-right: 200px;
">
            <div id="loading" class="loading">上传中。。。</div>
        </div>

    </div>

</div>
</body>
</html>